<template>
  <div class="max">
    <el-card class="box-card">
      <!-- <div slot="header" class="clearfix">
        <span> 查询信息</span>
      </div> -->
      <div class="text item">
        <el-button type="primary" @click="handleExport">导出</el-button>
        <!-- <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="组织架构：">
            <el-select v-model="formInline.orgId" placeholder="组织架构">
              <el-option v-for="item in orgs" :key="item.orgid" :label="item.orgname" :value="item.orgid"></el-option>

            </el-select>
          </el-form-item>

          <el-form-item label="数据库：">
            <el-select v-model="formInline.databaseId" placeholder="数据库">
              <el-option v-for="item in DataBases" :key="item.databaseid" :label="item.databasename" :value="item.databaseid"></el-option>

            </el-select>
          </el-form-item>
          <el-form-item label="关注列表：">
            <el-select v-model="formInline.followId" placeholder="关注列表">
              <el-option v-for="item in Follows" :key="item.followid" :label="item.followname" :value="item.followid"></el-option>

            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
            <el-button type="primary" @click="reset">重置</el-button>
            <el-button type="primary" @click="handleExport">导出</el-button>
          </el-form-item>
        </el-form> -->
      </div>

        <el-row :gutter="10">
         <el-col :span="12">
           <div id="show" class="showin"/>
           <h2 style="margin-left:20px">健康评分下降前三名</h2>
           <div class="table">
             <el-table
               :data="intelligents1"
               border
               style="width: 100%">
               <el-table-column
                 prop="databaseName"
                 label="数据库"
                 width="100">
               </el-table-column>
               <el-table-column
                 prop="exampleName"
                 label="系统名称"
                 width="180">
               </el-table-column>
               <el-table-column
                 prop="heathSore"
                 label="分值">
               </el-table-column>
               <el-table-column
                 prop="heathChange"
                 label="变化">
               </el-table-column>

             </el-table>
           </div>
         </el-col>
         <el-col :span="12">
           <div id="show1" class="showin"/>
           <h2 style="margin-left:20px">性能评分下降前三名</h2>
           <div class="table">
             <el-table
               :data="intelligents2"
               border
               style="width: 100%">
               <el-table-column
                 prop="databaseName"
                 label="数据库"
                 width="180">
               </el-table-column>
               <el-table-column
                 prop="exampleName"
                 label="系统名称"
                 width="180">
               </el-table-column>
               <el-table-column
                 prop="performanceScore"
                 label="分值">
               </el-table-column>
               <el-table-column
                 prop="performanceChange"
                 label="变化">
               </el-table-column>

             </el-table>
           </div>
         </el-col>
        </el-row>
        <el-row style="margin-top: 10px">
          <el-col :span="12">
            <div id="show2" class="showin"/>
            <h2 style="margin-left:20px">负载评分上升前三名</h2>
            <div class="table">
              <el-table
                :data="intelligents"
                border
                style="width: 100%">
                <el-table-column
                  prop="databaseName"
                  label="数据库"
                  width="180">
                </el-table-column>
                <el-table-column
                  prop="exampleName"
                  label="系统名称"
                  width="180">
                </el-table-column>
                <el-table-column
                  prop="loadScore"
                  label="分值">
                </el-table-column>
                <el-table-column
                  prop="loadChange"
                  label="变化">
                </el-table-column>

              </el-table>
            </div>
          </el-col>

        </el-row>



    </el-card>





  </div>
</template>

<script>  window._interceptConfig = {
  collection: true, //整体开关
  click: true, //页面点击事件信息采集开关
  page: true, //页面跳转加载事件信息采集开关
  error: true, //异常信息采集开关
  http: true, //通讯信息采集开关
  name: "jyzdhywxxxtsdfx_n_prd.mart-ui-ds", //系统编号，被采集信息的系统名称。前端简称
  url: " http://apm.sd.sgcc.com.cn:19411/api/v2/spansWeb"//数据上报服务地址，根据实际情况输入
};
</script>
<!-- src -->
<script src=" http://25.41.37.249:19411/assets/js/intercept.min.js " async></script>
<script>
  import * as echarts from 'echarts';
  import { queryOrgs, queryAppSystems, queryDataBases, queryExamples, queryFollows } from "@/api/system/generic";
  import { queryIntelligent  } from "@/api/diagmanage/intelligentdiagnosis";
  import { ExportBriefDataDocx,getBase64Sync } from "@/utils/outword"
  import html2canvas from "html2canvas"

  export default {
    data() {
      return {
        formInline: {
          orgId:'',
          applicationId: '',
          databaseId: '',
          followId:''
        },
        intelligents:[],
        intelligents1:[],
        intelligents2:[],
        orgs:[],
        AppSystems:[],
        DataBases:[],
        Examples:[],
        Follows:[],
        p95:[],
        p90:[],
        p80:[],
        p70:[],
        p60:[],
        h95:[],
        h90:[],
        h80:[],
        h70:[],
        h60:[],
        a95:[],
        a90:[],
        a80:[],
        a70:[],
        a60:[],
        flag:false,
        imgUrl1:undefined
      }
    },
    methods: {
      reset(){
        this.flag=false;
        this.formInline.applicationId=''
        this.formInline.databaseId=''
        this.formInline.followId=''
        this.formInline.orgId=''
        this.getList()
      },
      onSubmit() {
        this.flag=true
        this.getList();
      },
      /** 导出按钮操作 */
      handleExport() {
        this.exportWordFile()
        /*this.download('intelligentcontroller/retIntelligent', {
          ...this.formInline
        }, `数据分析_${new Date().getTime()}.xlsx`)*/

      },
      async exportWordFile (){
        let img = null
        let img1 = null
        let img2 = null
        // 转换成canvas
        await html2canvas(document.getElementById("show")).then(function (canvas) {img = canvas.toDataURL("image/png");});
        await html2canvas(document.getElementById("show1")).then(function (canvas) {img1 = canvas.toDataURL("image/png");});
        await html2canvas(document.getElementById("show2")).then(function (canvas) {img2 = canvas.toDataURL("image/png");});

        let  data= {

          imgUrl: img,
          list:this.intelligents,

          imgUrl1: img1,
          list1:this.intelligents,

          imgUrl2: img2,
          list2:this.intelligents,
        }
        ExportBriefDataDocx("/智能诊断模板.docx", data, `智能诊断.docx`);

      },

      initCharts(){
        const myChart = echarts.init(document.getElementById('show'))
        const option = {
          title: {
            text: '健康',
            //subtext: '业界情况分析',
            left: 'center'
          },
          tooltip: {
            trigger: 'item',
            /*
                显示信息的格式
                {a}:数据系列名称 对应 数据系列 name属性
                {b}:数据项名称 对应 数据系列中data属性中每个对象的name属性
                {c}:数值 对应 数据系列中data属性中每个对象的value属性
                {d}:根据数据值自动计算出的百分比
            */
            formatter: '{a} <br/>{b} : {c} ({d}%)'
          },
          legend: {
            /* 此处表示图例纵向排列 */
            orient: 'vertical',
            /* 图例显示的左侧 */
            bottom: 'bottom',

            /* 各个数据对应数据系列中data中的name属性值 */
            data: ['96分到100分', '90分到95分', '80分到89分', '70分到79分', '70分以下']
            /* 注意这里有个小功能，点击某个图例可以去除本图例的部分，并且重新计算百分比！！ */
          },
          series: [
            {
              name: '健康分值',
              type: 'pie',
              data: [
                { value: this.h95.length, name: '95分到100分' },
                { value: this.h90.length, name: '90分到95分' },
                { value: this.h80.length, name: '80分到89分' },
                { value: this.h70.length, name: '70分到79分' },
                { value: this.h60.length, name: '70分以下' }
              ],
              avoidLabelOverlap: false,
              label: {
                normal: {
                  show: false,
                },
              },
              labelLine: {
                normal: {
                  show: false
                }
              },
            }
          ],
        }

        myChart.setOption(option)
      },
      initCharts1(){
        const myChart = echarts.init(document.getElementById('show1'))
        const option = {
          title: {
            text: '性能',
            //subtext: '业界情况分析',
            left: 'center'
          },
          tooltip: {
            trigger: 'item',
            /*
                显示信息的格式
                {a}:数据系列名称 对应 数据系列 name属性
                {b}:数据项名称 对应 数据系列中data属性中每个对象的name属性
                {c}:数值 对应 数据系列中data属性中每个对象的value属性
                {d}:根据数据值自动计算出的百分比
            */
            formatter: '{a} <br/>{b} : {c} ({d}%)'
          },
          legend: {
            /* 此处表示图例纵向排列 */
            orient: 'vertical',
            /* 图例显示的左侧 */
            bottom: 'bottom',

            /* 各个数据对应数据系列中data中的name属性值 */
            data: ['96分到100分', '90分到95分', '80分到89分', '70分到79分', '70分以下']
            /* 注意这里有个小功能，点击某个图例可以去除本图例的部分，并且重新计算百分比！！ */



          },
          series: [
            {
              name: '性能分值',
              type: 'pie',
              data: [
                { value: this.p95.length, name: '95分到100分' },
                { value: this.p90.length, name: '90分到95分' },
                { value: this.p80.length, name: '80分到89分' },
                { value: this.p70.length, name: '70分到79分' },
                { value: this.p60.length, name: '70分以下' }
              ],
              avoidLabelOverlap: false,
              label: {
                normal: {
                  show: false,
                },
              },
              labelLine: {
                normal: {
                  show: false
                }
              },
            }
          ],
        }

        myChart.setOption(option)
      },
      initCharts2(){
        const myChart = echarts.init(document.getElementById('show2'))
        const option = {
          title: {
            text: '负载',
            //subtext: '业界情况分析',
            left: 'center'
          },
          tooltip: {
            trigger: 'item',
            /*
                显示信息的格式
                {a}:数据系列名称 对应 数据系列 name属性
                {b}:数据项名称 对应 数据系列中data属性中每个对象的name属性
                {c}:数值 对应 数据系列中data属性中每个对象的value属性
                {d}:根据数据值自动计算出的百分比
            */
            formatter: '{a} <br/>{b} : {c} ({d}%)'
          },
          legend: {
            /* 此处表示图例纵向排列 */
            orient: 'vertical',
            /* 图例显示的左侧 */
            bottom: 'bottom',

            /* 各个数据对应数据系列中data中的name属性值 */
            data: ['96分到100分', '90分到95分', '80分到89分', '70分到79分', '70分以下']
            /* 注意这里有个小功能，点击某个图例可以去除本图例的部分，并且重新计算百分比！！ */
          },
          series: [
            {
              name: '负载分值',
              type: 'pie',
              data: [
                { value: this.a95.length, name: '95分到100分' },
                { value: this.a90.length, name: '90分到95分' },
                { value: this.a80.length, name: '80分到89分' },
                { value: this.a70.length, name: '70分到79分' },
                { value: this.a60.length, name: '70分以下' }
              ],
              avoidLabelOverlap: false,
              label: {
                normal: {
                  show: false,
                },
              },
              labelLine: {
                normal: {
                  show: false
                }
              },
            }
          ],
        }

        myChart.setOption(option)
      },
      getList(){
        this.h60=[]
        this.h70=[]
        this.h80=[]
        this.h90=[]
        this.h95=[]
        this.p95=[]
        this.p90=[]
        this.p80=[]
        this.p70=[]
        this.p60=[]
        this.a95=[]
        this.a90=[]
        this.a80=[]
        this.a70=[]
        this.a60=[]



        let data = {}
        if(this.flag){
          data =this.formInline
        }

        queryIntelligent(data).then(res=>{
          this.intelligents=res.data
          // console.log(res)

          this.intelligents.forEach(e=>{

            if(e.heathSore>=95){

              this.h95.push('1')
            }else if(e.heathSore<95&&e.heathSore>=90){

              this.h90.push('1')
            }else if(e.heathSore<90&&e.heathSore>=80){
              this.h80.push('1')
            }else if(e.heathSore<80&&e.heathSore>=70){
              this.h70.push('1')
            }else if(e.heathSore<70){
              this.h60.push('1')
            }


            if(e.loadScore>=95){

              this.a95.push('1')
            }else if(e.loadScore<95&&e.loadScore>=90){

              this.a90.push('1')
            }else if(e.loadScore<90&&e.loadScore>=80){
              this.a80.push('1')
            }else if(e.loadScore<80&&e.loadScore>=70){
              this.a70.push('1')
            }else if(e.loadScore<70){
              this.a60.push('1')
            }

            if(e.performanceScore>=95){
              this.p95.push('1')
            }else if(e.performanceScore<95&&e.performanceScore>=90){
              this.p90.push('1')
            }else if(e.performanceScore<90&&e.performanceScore>=80){
              this.p80.push('1')
            }else if(e.performanceScore<80&&e.performanceScore>=70){
              this.p70.push('1')
            }else if(e.performanceScore<70){
              this.p60.push('1')
            }

          })

          this.initCharts()
          this.initCharts1()
          this.initCharts2()
          this.intelligents1 = JSON.parse(JSON.stringify(this.intelligents))
          this.intelligents2 = JSON.parse(JSON.stringify(this.intelligents))

          this.intelligents.sort((x,y)=>{
            return x.loadChange - y.loadChange
          })
          this.intelligents = this.intelligents.slice(0,3)


          this.intelligents1.sort((x,y)=>{
            return x.heathChange - y.heathChange
          })
          this.intelligents1 = this.intelligents1.slice(0,3)

          this.intelligents2.sort((x,y)=>{
            return x.performanceChange - y.performanceChange
          })
          this.intelligents2 = this.intelligents2.slice(0,3)

        })
      }




    },
    mounted(){
      this.getList()
      queryOrgs().then(response => {
        this.orgs=response.data

      });
      queryAppSystems().then(response => {

        this.AppSystems=response.data

      });
      queryDataBases().then(response => {
        this.DataBases=response.data

      });
      queryExamples().then(response => {
        this.Examples=response.data

      });
      queryFollows().then(response => {
        this.Follows=response.data

      });



    }



  }
</script>

<style scoped>
  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 100%;
    height: 2000px;
    overflow-x: auto;
  }
  .showin{
    width: 500px;
    height: 350px;
    margin-right: 50px;
    margin-left: 20px;


  }
  .container{
    width: 1830px;
    display: flex;
    margin-right: 50px;
    overflow-x: auto;

  }
  .table{
    align-items: center;
    margin-left: 20px;

  }
  .max{
    overflow-x: scroll;
  }


</style>
